<template>
  <div
    class="wrapper"
    v-if="$cookies.isKey('room')"
  >
    <Board
      class="board"
      @nextPlayer="next"
      @record="history"
      @timer="time"
    />
    <Menus
      ref="menu"
      :timePercent="timePercent"
      @giveSkill="skillVisible=true"
    />
    <el-dialog
      customClass="customDia"
      title="技能设置"
      :visible.sync="skillVisible"
    >
      <Skill @onSubmit="submit"/>
    </el-dialog>
  </div>
</template>

<script>
import Skill from '@/components/Skill.vue';
import Board from '@/components/Board.vue';
import Menus from '@/components/Menus.vue';

const confirmParam = {
  confirmButtonText: '同意',
  cancelButtonText: '拒绝',
  type: 'warning'
};

export default {
  name: 'Game',
  components: {
    Board,
    Skill,
    Menus
  },
  data() {
    return {
      side: 0,
      roomId: -1,
      skillVisible: false,
      timerFunc: null,
      sumTime: 0,
      tempTime: 0
    };
  },
  computed: {
    timePercent() {
      return this.sumTime === 0 ? 100 : Math.floor((this.tempTime / this.sumTime) * 100);
    }
  },
  methods: {
    time(begin) {
      if (begin) {
        this.tempTime = this.sumTime;
        this.timerFunc = setInterval(() => {
          if (this.tempTime > 0) {
            this.tempTime--;
          }
          else {
            // 超时自动判负
          }
        }, 1000);
        return;
      }
      clearInterval(this.timerFunc);
    },
    history(data) {
      this.$refs.menu.addHistory(data);
    },
    submit(skill) {
      this.$refs.menu.ready(skill);
      this.skillVisible = false;
    },
    next([x, y]) { // 修改点
      const {roomId, robot, side} = this.$cookies.get('room');
      this.$socket.emit('complete', {x, y, roomId, robot, side});
    }
  },
  created() {
    if (this.$cookies.isKey('room')) {
      this.side = this.$cookies.get('room').side;
      const str = this.$cookies.get('room').time;
      this.sumTime = Number(str[0] * 600 + str[1] * 60 + str[3] * 10 + str[4]);
    }
    else {
      this.$notify({
        title: '注意',
        message: 'you need enter a room first',
        duration: 0
      });
    }
    window.onbeforeunload = function (e) {
      e = e || window.event;
      if (!e) {
        // 这里用户关闭了浏览器
        return 0;
      }
    };
  },
  sockets: {
    reconnect() {
      if (this.$cookies.isKey('room')) {
        const roomId = this.$cookies.get('room').roomId;
        this.$socket.emit('enter', {roomId});
        this.$socket.emit('recovery', {roomId});
      }
    },
    complete() {
      this.$refs.menu.nextPlayer();
    },
    draw(data) {
      const {roomId, side} = this.$cookies.get('room');
      if (data.side !== side) {
        if ('succeed' in data) {
          if (data.succeed) {
            this.$message({type: 'success', message: '和棋成功!'});
            this.$refs.menu.cancel(); // 取消准备状态
          }
          else {
            this.$message({type: 'info', message: '对方拒绝和棋'});
          }
        }
        else {
          this.$confirm('对方发起和棋, 是否同意?', '提示', confirmParam).then(() => {
            this.$socket.emit('draw', {accept: true, roomId, side});
            this.$message({type: 'success', message: '和棋成功,游戏结束!'});
            this.$refs.menu.cancel();
          }).catch(() => {
            this.$socket.emit('draw', {accept: false, roomId, side});
            this.$message({type: 'info', message: '已拒绝'});
          });
        }
      }
    },
    repentance(data) {
      const {roomId, side} = this.$cookies.get('room');
      if (data.side !== side) {
        if ('succeed' in data) {
          if (data.succeed) {
            this.$message({type: 'success', message: '悔棋成功!'});
            this.$refs.menu.backPlayer();
          }
          else {
            this.$message({type: 'info', message: '对方拒绝和棋'});
          }
        }
        else {
          this.$confirm('对方请求悔棋, 是否同意?', '提示', confirmParam).then(() => {
            this.$socket.emit('repentance', {accept: true, roomId, side});
            this.$refs.menu.backPlayer();
          }).catch(() => {
            this.$socket.emit('repentance', {accept: false, roomId, side});
            this.$message({type: 'info', message: '已拒绝'});
          });
        }
      }
    },
    overGame(data) {
      this.$refs.menu.cancel(); // 给两个玩家取消准备
      this.$message({type: 'info', message: data.winner === 0 ? '红方胜利,游戏结束!' : '黑方胜利,游戏结束!'});
    }
  },
  beforeDestroy() {
    clearInterval(this.timerFunc);
  }
};
</script>

<style scoped>
.wrapper {
  width: max-content;
  position: relative;
}
.board {
  width: max-content;
  position: absolute;
  left: 310px;
}
</style>
